<template>
	<!-- @touchmove.stop.prevent 禁止滚动 -->
	<view class="down-bar row sticky-box" @touchmove.stop.prevent="()=>{}">

		<view class="one" v-for="(item, index) in downBars" @click="clickSortView(item)" :key="index">
			<view class="center" :class="{active: item.active || (item.id || item.id ==0) }">
				<text>{{item.name}}</text>
				<text class="iconfont icon-down1" v-show="!item.active"></text>
				<text class="iconfont icon-up" v-show="item.active"></text>
			</view>
			<view class="item-list" v-show="item.active">
				<!-- 在category组件中分类点击事件不要少了.stop @click.stop-->
				<category class="categroy-box" v-if="item.isCategory" />
				<view class="name" v-else v-for="(info, i) in item.list" :key="i" @click="changeSort(item, info)"
					:class="{active: info.name === item.name}">
					{{info.name}}
				</view>
			</view>
			<!-- 蒙层 -->
			<view class="cover" v-show="item.active"></view>
		</view>
	</view>
</template>

<script>
	import categroy from '@/pages/category/category.vue'

	export default {
		components: {
			categroy
		},
		props: {
			params: { // 其他页面跳转搜索页带上的请求参数，用于回显
				type: Object,
				default: null,
			},
			downBars: { //下拉筛选相关内容
				type: Array,
				default: () => [{
						type: 'sort', // 标识什么类型
						name: '综合排序',
						active: false,
						list: [{
								id: null,
								name: '综合排序'
							},
							{
								id: 'new',
								name: '最新排序'
							},
							{
								id: 'hot',
								name: '热门排序'
							}
						]
					},
					{
						type: 'label',
						name: '全部分类',
						active: false,
						isCategory: true
					}
				]
			},
		},
		watch: {
			params: { // 监听其他页跳转到搜索页带的参数
				handler(newVal) {
					if (newVal) {
						if (newVal.name) {
							const obj = this.downBars[this.downBars.length - 1]
							// 将`全部分类`按钮的文字更新为新的标签名称
							obj.name = newVal.name
							obj.id = newVal.labelId
							// 为了打开分类弹窗后，高亮显示当前是哪个分类
							obj.activeIndex = newVal.activeIndex
							return //不要少了
						}
					}
				},
				immediate: true //第1次即监听
			}
		},

		data() {
			return {
				// 声明用于接收父组件传递的数据，方便后续修改，直接修改小程序不生效
				downBarList: null
			}
		},

		created() {
			this.downBarList = this.downBars
		},

		methods: {
			clickDownView(item) {
				// 显示或隐藏排序选项弹窗w
				this.downBarList.forEach((i) => {
					// 当前点击的显示或隐藏: 其他的全部隐藏状态
					i.active = (item === i) ? !item.active : false
				})
			},

			// 下拉选中时触发等
			changeInfo(item, info) {
				// 说明和之前一样，不用重新查询
				if (item.name === info.name) {
					return
				}
				// 更改选项上显示的名称
				item.name = info.name
				item.id = info.id //传递后，可以高亮显示

				// 查询数据（引用变量作为值时，需要使用中括号括起来）
				this.$emit('search', {
					[item.type]: info.id
				})
			},

		},

	}
</script>

<style lang="scss">
	.down-bar {
		z-index: 100;
		background-color: #FFFFFF;
		font-size: 30rpx;
		line-height: 80rpx;
	}

	.item-list {
		z-index: 100;
		background-color: #FFFFFF;
		position: absolute;
		left: 0;
		right: 0;

		.name {
			padding-left: 80rpx;
		}

		.category {
			height: 580rpx;
		}
	}

	// 被点击之后的效果
	.active {
		color: skyblue;
	}

	// 粘顶
	.sticky-box {
		position: -webkit-sticky;
		position: sticky;
		/* 其他浏览器 */
		top: var(--window-top);
	}

	/*蒙层*/
	.cover {
		z-index: 99;
		position: fixed;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: black;
		opacity: 0.2 !important;
	}
</style>
